<template>
  <div id="detail">
    <!--1. 面包屑导航 -->
    <div id="breadcrumb">
      <span><a href="#">首页</a><i class="nbsp">></i></span>
      <span><a href="#">居家生活</a><i class="nbsp">></i></span>
      <span><a href="#">品质锅具</a><i class="nbsp">></i></span>
      <span>原创调色 珠光色铸铁珐琅锅22cm</span>
    </div>
    <!-- 2.主内容详情 -->
    <div id="content">
      <div id="left">
        <!-- <img src="./image/461bcd0dce76248e844ea45b65f61834.webp" class="imgOne" /> -->
        <zoom></zoom>
        <ImageList></ImageList>
        <!-- <div>
          <img src="./image/放大镜.webp" class="slideshow" />
          <img src="./image/放大镜2.webp" class="slideshow" />
          <img src="./image/放大镜.webp" class="slideshow" />
          <img src="./image/放大镜2.webp" class="slideshow" />
          <img src="./image/放大镜.webp" class="slideshow" />
        </div> -->
        <a href="#"><span>企业采购更优惠</span></a>
      </div>

      <div id="right">
        <!-- 头部 -->
        <div class="header">
          <h2>原创调色 珠光色铸铁珐琅锅22cm</h2>
          <span class="header1">传统铸造工艺 煮肉煲汤风味佳</span>
          <span class="header2">99.6%</span>
          <span class="header3">好评率> </span>
        </div>
        <!-- 主要介绍 -->
        <div class="table">
          <span class="table1">价格</span>
          <span class="table2"><i>￥</i>288</span>
          <hr />
          <span class="table3">购物返</span>
          <span class="table4">最高返28积分</span>
          <hr />
          <span class="table5">邮费</span>
          <span class="table6">满99元免邮,邮费8元</span>
          <hr />
          <span class="table7">配送</span>
          <span class="table8">至</span>
          <select class="table9">
            <option>请填写地址</option>
            <option>湖南省</option>
          </select>
          <hr />
          <span class="table10">服务</span>
          <a class="table11"
            >.严选自营&nbsp;&nbsp;&nbsp;.不可用红包&nbsp;&nbsp;&nbsp;.国内部分地区不可配送&nbsp;&nbsp;</a
          >
          <hr />
          <span class="table12">规则</span>
          <a class="table13">.首单全额返最高150余额，点击查看</a>
          <hr />
        </div>

        <div class="specification">
          <span class="specification-One">规格</span>
          <img src="./image/放大镜.webp" class="imgTow" />
          <img src="./image/放大镜2.webp" class="imgTow" />
          <img src="./image/放大镜.webp" class="imgTow" />
          <img src="./image/放大镜2.webp" class="imgTow" />
          <img src="./image/放大镜.webp" class="imgTow" />
          <img src="./image/放大镜2.webp" class="imgTow" />
        </div>
        <!-- 数量加减 -->
        <div class="quantity">
          <span class="num">数量</span>
          <span class="subtract">-</span>
          <input type="text" value="20"/>
          <span class="plus">+</span>
        </div>
        <!-- 购买返150元余额 -->
        <div class="buy">
          <span class="buy1">立即购买￥288<i>(购买返150元余额)</i> </span>
          <span class="buy2">
            <i class="iconfont icon-shoucang"></i>
            <p>收藏</p>
          </span>
          <span class="buy3">
            <p class="icon2">
              <i class="iconfont icon-xiazai icon1"></i>下载严选APP
            </p>
          </span>
        </div>
      </div>
    </div>

    <!-- 3.轮播图 -->
    <div id="like">
      <div class="Maybe">
        <span>你可能还喜欢</span>
      </div>
      <!-- <div class="swiper"> -->
      <!-- <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="imageSwiper">
              <img src="./image/轮播图.webp" class="imgThree" />
              <p>白玉锅系列 双耳不沾深汤锅</p>
              <i>￥79</i>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="imageSwiper">
              <img src="./image/轮播图.webp" class="imgThree" />
              <p>白玉锅系列 双耳不沾深汤锅</p>
              <i>￥79</i>
            </div>
          </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div> -->

      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="imageSwiper">
              <img src="./image/轮播图.webp" class="imgThree" />
              <p>白玉锅系列 双耳不沾深汤锅</p>
              <i>￥79</i>
            </div>
            <div class="imageSwiper">
              <img src="./image/轮播图.webp" class="imgThree" />
              <p>白玉锅系列 双耳不沾深汤锅</p>
              <i>￥79</i>
            </div>
            <div class="imageSwiper">
              <img src="./image/轮播图.webp" class="imgThree" />
              <p>白玉锅系列 双耳不沾深汤锅</p>
              <i>￥79</i>
            </div>
            <div class="imageSwiper">
              <img src="./image/轮播图.webp" class="imgThree" />
              <p>白玉锅系列 双耳不沾深汤锅</p>
              <i>￥79</i>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="imageSwiper">
              <img src="./image/轮播图.webp" class="imgThree" />
              <p>白玉锅系列 双耳不沾深汤锅</p>
              <i>￥79</i>
            </div>
            <div class="imageSwiper">
              <img src="./image/轮播图.webp" class="imgThree" />
              <p>白玉锅系列 双耳不沾深汤锅</p>
              <i>￥79</i>
            </div>
            <div class="imageSwiper">
              <img src="./image/轮播图.webp" class="imgThree" />
              <p>白玉锅系列 双耳不沾深汤锅</p>
              <i>￥79</i>
            </div>
            <div class="imageSwiper">
              <img src="./image/轮播图.webp" class="imgThree" />
              <p>白玉锅系列 双耳不沾深汤锅</p>
              <i>￥79</i>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="imageSwiper">
              <img src="./image/轮播图.webp" class="imgThree" />
              <p>白玉锅系列 双耳不沾深汤锅</p>
              <i>￥79</i>
            </div>
             <div class="imageSwiper">
              <img src="./image/轮播图.webp" class="imgThree" />
              <p>白玉锅系列 双耳不沾深汤锅</p>
              <i>￥79</i>
            </div>
             <div class="imageSwiper">
              <img src="./image/轮播图.webp" class="imgThree" />
              <p>白玉锅系列 双耳不沾深汤锅</p>
              <i>￥79</i>
            </div>
             <div class="imageSwiper">
              <img src="./image/轮播图.webp" class="imgThree" />
              <p>白玉锅系列 双耳不沾深汤锅</p>
              <i>￥79</i>
            </div>
          </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
      </div>
    </div>

    <!-- 4.底部 -->
    <div id="footer">
      <div class="left">
        <!-- 头部 -->
        <ul class="footer-one">
          <li class="lis">详情</li>
          <li class="lis">评价<span>(13521)</span></li>
          <li class="lis">常见问题</li>
        </ul>
        <!-- 表格 -->
        <div class="footer-tow">
          <table cellspacing="1" class="footer-table">
            <tr>
              <th>直径</th>
              <td>22cm</td>
              <th>适用人数</th>
              <td>3-5人</td>
            </tr>
            <tr>
              <th>产地</th>
              <td colspan="3">中国</td>
            </tr>
            <tr>
              <th>适用炉具</th>
              <td colspan="3">通用、卤素炉、电陶炉、直火、电磁炉</td>
            </tr>
            <tr>
              <th>材质</th>
              <td>铸铁</td>
              <th>适用场景</th>
              <td>煎、煲汤、炖菜</td>
            </tr>

            <tr>
              <th>品名</th>
              <td>100年传世系列，丹桂金秋珐琅锅</td>
              <th>重量</th>
              <td>约4KG</td>
            </tr>

            <tr>
              <th>容量</th>
              <td>2.5L</td>
              <th>内表面</th>
              <td>黑珐琅</td>
            </tr>
          </table>
        </div>
        <!-- 详情介绍 -->
        <div class="footer-three">
          <div class="threeOne">
            <span class="ThreeTow">严选TIPS</span><br />
            <div>
              1.丹桂金秋表面闪光的是珠光，珠光的含量和反光，均会对珐琅锅表面颜色产生影响，因此颜色有一定的偏差围，属于正常现象。
            </div>
            <div>
              2.丹桂金秋表面的珠光成分为云母，经过加工后边变为闪亮的金点
            </div>
          </div>
          <div class="threeOne">
            <span class="ThreeOne">严选TIPS</span><br />
            <div>
              1.丹桂金秋表面闪光的是珠光，珠光的含量和反光，均会对珐琅锅表面颜色产生影响，因此颜色有一定的偏差围，属于正常现象。
            </div>
            <div>
              2.丹桂金秋表面的珠光成分为云母，经过加工后边变为闪亮的金点
            </div>
          </div>
          <div class="threeOne">
            <span class="ThreeOne">严选TIPS</span><br />
            <div>
              1.丹桂金秋表面闪光的是珠光，珠光的含量和反光，均会对珐琅锅表面颜色产生影响，因此颜色有一定的偏差围，属于正常现象。
            </div>
            <div>
              2.丹桂金秋表面的珠光成分为云母，经过加工后边变为闪亮的金点
            </div>
          </div>
          <div class="threeOne">
            <span class="ThreeOne">严选TIPS</span><br />
            <div>
              1.丹桂金秋表面闪光的是珠光，珠光的含量和反光，均会对珐琅锅表面颜色产生影响，因此颜色有一定的偏差围，属于正常现象。
            </div>
            <div>
              2.丹桂金秋表面的珠光成分为云母，经过加工后边变为闪亮的金点
            </div>
          </div>
          <div class="threeOne">
            <span class="ThreeOne">严选TIPS</span><br />
            <div>
              1.丹桂金秋表面闪光的是珠光，珠光的含量和反光，均会对珐琅锅表面颜色产生影响，因此颜色有一定的偏差围，属于正常现象。
            </div>
            <div>
              2.丹桂金秋表面的珠光成分为云母，经过加工后边变为闪亮的金点
            </div>
          </div>
          <!-- 介绍图 -->
          <p><img src="./image/最后图片.webp" style="height: 200px" /></p>
          <p><img src="./image/最后图片2.webp" style="height: 200px" /></p>
          <p><img src="./image/最后图片3.webp" style="height: 200px" /></p>
          <p><img src="./image/最后图片4.webp" style="height: 200px" /></p>
          <p><img src="./image/最后图片5.webp" style="height: 200px" /></p>
        </div>
        <!-- 右边热搜 -->
      </div>
      <div class="right">
        <span class="hot-one">
          <h2>24小时热搜榜</h2>
        </span>
        <div class="hot-tow">
          <img src="./image/热搜图.webp" />
          <div class="hotOne">
            <span>冬夏软硬两用，护脊椰棕</span>
            <span>乳胶床垫舒睡款</span>
            <div>￥1399</div>
          </div>
        </div>
        <div class="hot-tow">
          <img src="./image/热搜图.webp" />
          <div class="hotOne">
            <span>冬夏软硬两用，护脊椰棕</span>
            <span>乳胶床垫舒睡款</span>
            <div>￥1399</div>
          </div>
        </div>
        <div class="hot-tow">
          <img src="./image/热搜图.webp" />
          <div class="hotOne">
            <span>冬夏软硬两用，护脊椰棕</span>
            <span>乳胶床垫舒睡款</span>
            <div>￥1399</div>
          </div>
        </div>
        <div class="hot-tow">
          <img src="./image/热搜图.webp" />
          <div class="hotOne">
            <span>冬夏软硬两用，护脊椰棕</span>
            <span>乳胶床垫舒睡款</span>
            <div>￥1399</div>
          </div>
        </div>
        <div class="hot-tow">
          <img src="./image/热搜图.webp" />
          <div class="hotOne">
            <span>冬夏软硬两用，护脊椰棕</span>
            <span>乳胶床垫舒睡款</span>
            <div>￥1399</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script></script>

<script>
import zoom from "./zoom/index.vue";
import ImageList from "./ImageList/index.vue";
import Swiper from "swiper";
export default {
  name: "Detail",
  components: {
    zoom,
    ImageList,
  },
  data() {
    return {};
  },
  mounted() {
    var swiper = new Swiper(".mySwiper", {
      cssMode: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
        loop:true,
      },
      pagination: {
        el: ".swiper-pagination",
      },
      mousewheel: true,
      keyboard: true,
    });

    // var mySwiper = new Swiper(".swiper", {
    //   // direction: "vertical", // 垂直切换选项
    //   loop: true, // 循环模式选项

    //   // 如果需要分页器
    //   // pagination: {
    //   //   el: ".swiper-pagination",
    //   // },
    //   // 设置为true启动自动切换，并使用默认的切换设置。
    //   autoplay: {
    //     delay: 3000,
    //     stopOnLastSlide: true,
    //     disableOnInteraction: true,
    //   },
    //   // 如果需要前进后退按钮
    //   navigation: {
    //     nextEl: ".swiper-button-next",
    //     prevEl: ".swiper-button-prev",
    //   },

    //   // 如果需要滚动条
    //   scrollbar: {
    //     el: ".swiper-scrollbar",
    //   },
    // });
  },
};
</script>

<style lang="less" scoped>
#detail {
  width: 1090px;
  /* 居中 左右边距相等*/
  margin-left: auto;
  margin-right: auto;
  // border: 1px solid black;
  background-color: #fff;

  /*1. 面包屑导航 */
  #breadcrumb {
    width: 100%;
    font-size: 12px;
    padding: 20px 0;
    color: #333;
    line-height: 1px;
    .nbsp {
      padding: 0 2px 0 2px;
      box-sizing: border-box;
    }
  }

  // 2.主内容
  #content {
    //超出元素隐藏 浮动不写这个撑不开父元素
    overflow: hidden;
    #left {
      background: #f4f4f4;
      float: left;
      .imgOne {
        width: 428px;
        height: 428px;
      }
      //放大镜小轮播图
      .slideshow {
        width: 76px;
        height: 76px;
        // float:left;
        margin: 5px 12px 5px 0;
      }
      a {
        width: 131px;
        height: 30px;
        background-color: #f5f3ef;
        margin: 14px 14px 0 0;
        padding: 0 10px;
        border: 1px solid #b4a078;
        font-size: 24px;
        span {
          width: 120px;
          height: 25px;
          color: #b4a078;
          font-size: 14px;
          display: inline-block;
          padding: 20px 0;
        }
      }
    }
    #right {
      overflow: hidden;
      padding-left: 40px;
      .header {
        width: 620px;
        height: 57px;
        margin: 0 0 20px;
        position: relative;
        h2 {
          font-size: 20px;
          color: #333;
          margin: 0 0 7px;
          padding: 0 65px 0 0;
        }
        .header1 {
          font-size: 14px;
          color: #999;
        }
        .header2 {
          font-size: 20px;
          color: #e36844;
          width: 57.8px;
          height: 26.4px;
          position: absolute;
          right: 0;
          top: 0;
        }
        .header3 {
          width: 52.5px;
          height: 16.8px;
          color: #333;
          font-size: 13px;
          position: absolute;
          right: 0;
        }
      }
      // 主要介绍
      .table {
        width: 620px;
        height: 180px;
        padding: 20px 0 13px;
        background-color: #f5f3ef;
        color: #333;
        margin: 5px 0 15px;
        // border: 1px solid green;
        .table1 {
          width: 55px;
          height: 30px;
          color: #666;
          font-size: 13px;
          margin: 16px 0 0 10px;
        }
        .table2 {
          width: 51.81px;
          height: 36.8px;
          font-size: 23px;
          color: #d7282d;
          margin: 0 0 0 26px;

          i {
            width: 11.11px;
            height: 24px;
            font-size: 16px;
          }
        }
        .table3 {
          width: 55px;
          height: 24px;
          color: #666;
          margin: 0 0 0 10px;
          display: inline-block;
        }
        .table4 {
          width: 80px;
          height: 24px;
          display: inline-block;
        }
        .table5 {
          width: 55px;
          height: 24px;
          color: #666;
          margin: 0 0 0 10px;
          display: inline-block;
        }
        .table6 {
          width: 126.88px;
          height: 16.8px;
          display: inline-block;
        }
        .table7 {
          width: 55px;
          height: 24px;
          color: #666;
          margin: 0 0 0 10px;
          display: inline-block;
        }
        .table8 {
          width: 13px;
          height: 24px;
          display: inline-block;
        }
        .table9 {
          width: 115px;
          height: 24px;
          margin: 0 10px 0 6px;
          padding: 0 14px;
          display: inline-block;
        }
        .table10 {
          width: 55px;
          height: 24px;
          color: #666;
          margin: 0 0 0 10px;
          display: inline-block;
        }
        .table11 {
          width: 280px;
          height: 24px;
          display: inline-block;
        }
        .table12 {
          width: 55px;
          height: 24px;
          display: inline-block;
          margin: 0 0 0 10px;
        }
        .table13 {
          width: 218px;
          height: 16.8px;
          display: inline-block;
        }
      }
      //规格
      .specification {
        .specification-One {
          display: inline-block;
          width: 54px;
          height: 50px;
          vertical-align: middle;
        }
        .imgTow {
          width: 48px;
          height: 48px;
          margin-right: 10px;
        }
      }
      //数量加减
      .quantity {
        .num {
          display: inline-block;
          width: 54px;
          height: 30px;
          vertical-align: middle;
          color: #666;
          font-size: 12px;
        }
        .subtract {
          display: inline-block;
          width: 36px;
          height: 30px;
          line-height: 28px;
          text-align: center;
          background-color: #fff;
          vertical-align: middle;
          font-size: 25px;
          border: 1px solid green;
        }
        input {
          width: 60px;
          height: 27px;
          font-size: 12px;
          vertical-align: middle;
        }
        .plus {
          display: inline-block;
          width: 36px;
          height: 30px;
          line-height: 28px;
          background-color: #fff;
          vertical-align: middle;
          text-align: center;
          font-size: 25px;
          border: 1px solid green;
        }
      }
      //购买
      .buy {
        margin-left: 12px;
        margin-top: 30px;
        margin-right: 10px;
        .buy1 {
          width: 346px;
          height: 50px;
          line-height: 50px;
          background: #b4a078;
          border: 1px solid transparent;
          display: inline-block;
          background-color: #b4a078;
          color: #fff;
          font-size: 18px;
          text-align: center;
          vertical-align: middle;
          margin-right: 10px;
          i {
            font-size: 12px;
          }
        }
        .buy2 {
          width: 50px;
          height: 49px;
          line-height: 49px;
          text-align: center;
          background: #fff;
          border: 1px solid #ccc;
          display: inline-block;
          color: #999;
          vertical-align: middle;
          margin-right: 15px;
          i {
            width: 16px;
            height: 15px;
            display: block;
            margin: -10px 15px 0;
            font-size: 20px;
          }
          p {
            width: 48px;
            height: 23px;
            padding-top: 5px;
          }
        }
        .buy3 {
          width: 168px;
          height: 49px;
          line-height: 50px;
          text-align: center;
          background: #fff;
          border: 1px solid #ccc;
          display: inline-block;
          color: #999;
          font-size: 18px;
          vertical-align: middle;

          .icon2 {
            width: 120px;
            height: 24px;
            display: block;
            .icon1 {
              width: 27px;
              height: 27px;
              font-size: 22px;
              padding-left: 10px;
            }
          }
        }
      }
    }
  }

  //3.喜欢
  #like {
    // border: 1px solid #333;
    // width: 1088px;
    margin: 40px 0 0;
    //头部介绍
    .Maybe {
      width: 1088px;
      height: 44px;
      background-color: #f5f5f5;
      color: #333;
      font-size: 17px;
      span {
        width: 120px;
        height: 44px;
        line-height: 44px;
        text-align: right;
        display: inline-block;
      }
    }
    //轮播图
    .swiper {
      position: relative;
    }
    .swiper-slide {
      display: flex;
      padding-left:80px;
    .imageSwiper{
       margin-top: 40px;
            height: 308px;

            // 图片
            .imgThree {
              width: 210px;
              height: 210px;
              background-color: #fff;
              margin: 5px 10px;
            }
            // 文字
            p {
              color: #333;
              text-align: center;
            }
            i {
              text-align: center;
              font-size: 13px;
              color: #d4282d;
              display: block;
              margin: 0 auto;
            }
    }

    }
    // .swiper {
    //   overflow: hidden;
    //   width: 1090px;
    //   height: 337px;
    //   position: relative;
    //   // 大框
    //   .swiper-wrapper {
    //     //单个轮播主体
    //     .swiper-slide {
    //       overflow: hidden;
    //       position: absolute;
    //       left: 80px;
    //       //轮播图片
    //       .imageSwiper {
    //         margin-top: 40px;
    //         height: 308px;
    //         float: left;

    //         // 图片
    //         .imgThree {
    //           width: 210px;
    //           height: 210px;
    //           background-color: #fff;
    //           margin: 5px 10px;
    //         }
    //         // 文字
    //         p {
    //           color: #333;
    //           text-align: center;
    //         }
    //         i {
    //           text-align: center;
    //           font-size: 13px;
    //           color: #d4282d;
    //           display: block;
    //           margin: 0 auto;
    //         }
    //       }
    //     }
    //   }
    // }

    // 切换轮播图点
    // .swiper-button {
    //   width: 960px;
    //   height: 27.6px;
    //   margin: 2px 0 0;
    //   // border: 1px solid green;
    //   position: absolute;
    //   bottom: 0;
    //   .buttonOne {
    //     // border:1px solid green;
    //     width: 100px;
    //     margin: 0 auto;
    //     button {
    //       margin-left: 7px;
    //       padding: 2px;
    //       background-color: #cecece;
    //       color: transparent;
    //       border-radius: 50%;
    //     }
    //   }
    // }
  }
  //4.底部
  #footer {
    position: relative;
    .left {
      width: 750px;
      overflow: hidden;
      border: 1px solid green;
      // 头部
      .footer-one {
        overflow: hidden;
        background-color: #f5f5f5;
        .lis {
          width: 124px;
          height: 44px;
          //给行高垂直居中
          line-height: 44px;
          font-size: 12px;
          border: 1px solid #e8e8e8;
          //水平居中
          text-align: center;
          float: left;
          span {
            color: #b4a078;
          }
        }
      }

      //表格
      .footer-tow {
        //清除浮动
        clear: both;
        .footer-table {
          width: 100%;
          padding: 8px 30px;
          font-size: 14px;

          tr {
            height: 41px;
            border-bottom: 1px dashed #e8e8e8;
            th {
              width: 105px;
              height: 24px;
              text-align: center;
            }
            td {
              width: 196px;
              height: 24px;
            }
          }
        }
      }

      //大段介绍
      .footer-three {
        padding: 8px 30px;
        .threeOne {
          height: 88px;
          border-bottom: 1px dashed #e8e8e8;
          font-size: 14px;
          .ThreeTow {
            color: #333;
          }
          div {
            color: #999;
          }
        }
        // 图片
        p {
          font-size: 0;
        }
      }
    }
    .right {
      position: absolute;
      top: 0;
      right: 0;
      // border:1px solid green;
      background-color: #f5f5f5;
      .hot-one {
        width: 298px;
        height: 43px;
        line-height: 43px;
        color: #333;
        font-size: 18px;
        background-color: #f5f5f5;
        display: inline-block;
        text-align: center;
      }
      .hot-tow {
        width: 250px;
        margin: 20px 0 20px 0;
        img {
          margin-left: 25px;
        }
        .hotOne {
          // border:1px solid green;
          text-align: center;
          display: inline-block;
          width: 166px;
          height: 44px;
          color: #333;
          font-size: 14px;
          margin: 0 60px;
          div {
            width: 33px;
            height: 19.2px;
            color: #d62525;
            font-size: 14px;
            margin: 0 auto;
          }
        }
      }
    }
  }
}
</style>
